<!-- filename: components/Profile/CommentList.vue (分页器版) -->
<template>
  <view class="comment-list-container">
    <!-- 分类切换 -->
    <view class="comment-type-tabs">
      <view 
        class="type-tab" 
        :class="{ active: activeType === 'song' }"
        @click="switchType('song')"
      >
        歌曲评论
      </view>
      <view 
        class="type-tab" 
        :class="{ active: activeType === 'playlist' }"
        @click="switchType('playlist')"
      >
        歌单评论
      </view>
    </view>

    <!-- 【新增】分页器 -->
    <ListControls
      v-if="comments.length > 0"
      :pagination="pagination"
      context="comments"
      @update:page="handlePageChange"
    />

    <!-- 评论列表 -->
    <view v-if="isLoading" class="loading-state">加载中...</view>
    <view v-else-if="comments.length === 0" class="empty-state">还没有发布过任何评论</view>
    <view v-else>
      <view v-for="comment in comments" :key="`${comment.target_type}-${comment.id}`" class="comment-item" @click="navigateToTarget(comment)">
        <view class="comment-content">"{{ comment.content }}"</view>
        <view class="comment-meta">
          <text>评论于 {{ comment.target_type === 'song' ? '歌曲' : '歌单' }}：</text>
          <text class="target-title">{{ comment.target_title }}</text>
        </view>
        <view class="timestamp">{{ comment.created_at }}</view>
      </view>
    </view>
  </view>
</template>

<script setup>
// filename: frontend/src/components/Profile/CommentList.vue (最终跳转逻辑修复版)

import { ref, reactive } from 'vue';
import { useAuthStore } from '@/store/auth';
import { useSearchStore } from '@/store/search'; // 【核心新增1】导入 searchStore
import ListControls from '@/components/ListControls/ListControls.vue';

const authStore = useAuthStore();
const searchStore = useSearchStore(); // 【核心新增2】获取 store 实例
const API_BASE_URL = import.meta.env.VITE_API_BASE_URL;

const comments = ref([]);
const isLoading = ref(true);
const activeType = ref('song');
const pagination = reactive({
  current_page: 1,
  total_pages: 1,
  total_items: 0,
});

const switchType = (type) => {
  if (activeType.value === type) return;
  activeType.value = type;
  pagination.current_page = 1;
  fetchMyComments();
};

const fetchMyComments = () => {
  isLoading.value = true;
  uni.request({
    url: `${API_BASE_URL}/api/me/comments?type=${activeType.value}&page=${pagination.current_page}`,
    header: { 'Authorization': `Bearer ${authStore.access_token}` },
    success: (res) => {
      if (res.statusCode === 200) {
        comments.value = res.data.comments;
        pagination.total_pages = res.data.pagination.total_pages;
        pagination.total_items = res.data.pagination.total_items;
      }
    },
    complete: () => {
      isLoading.value = false;
    }
  });
};

const handlePageChange = (newPage) => {
  pagination.current_page = newPage;
  fetchMyComments();
};

// 【核心修改】完整替换 navigateToTarget 函数
const navigateToTarget = (comment) => {
  // --- 1. 如果评论的是歌曲 ---
  if (comment.target_type === 'song') {
    const songId = comment.target_id;
    const commentId = comment.id;
    const parentId = comment.parent_comment_id;

    // a. 调用定位 API
    uni.showLoading({ title: '正在定位歌曲...' });
    uni.request({
        url: `${API_BASE_URL}/api/songs/location/${songId}`,
        header: { 'Authorization': `Bearer ${authStore.access_token}` },
        success: (res) => {
            if (res.statusCode === 200) {
                // b. 将跳转任务存入 searchStore
                searchStore.setPendingJump({
                    page: res.data.page,
                    sort_by: res.data.sort_by,
                    highlight_song_id: songId,
                    open_comment: true,
                    highlight_comment_id: commentId,
                    highlight_parent_id: parentId
                });
                // c. 切换到首页
                uni.switchTab({ url: `/pages/index/index` });
            } else {
                uni.showToast({ title: '定位歌曲失败', icon: 'error' });
            }
        },
        fail: () => {
            uni.showToast({ title: '网络错误', icon: 'error' });
        },
        complete: () => {
            uni.hideLoading();
        }
    });
  } 
  // --- 2. 如果评论的是歌单 (逻辑保持不变) ---
  else if (comment.target_type === 'playlist') {
    let url = `/pages/public-playlist-detail/public-playlist-detail?id=${comment.target_id}&action=find_comment`;
    if (comment.parent_comment_id) {
      url += `&parent_id=${comment.parent_comment_id}&comment_id=${comment.id}`;
    } else {
      url += `&comment_id=${comment.id}`;
    }
    uni.navigateTo({ url });
  }
};

// 初始加载
fetchMyComments();
</script>

<style scoped lang="scss">
/* 【修改】为容器增加边框和圆角，使其看起来像一个独立的卡片 */
.comment-list-container {
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  overflow: hidden; /* 隐藏内部边框溢出 */
}

.comment-type-tabs {
  display: flex;
  gap: 15px;
  padding: 10px 15px;
  background-color: #f9f9f9;
  border-bottom: 1px solid #f0f0f0;
}
.type-tab {
  font-size: 15px;
  color: #666;
  cursor: pointer;
  &.active {
    font-weight: bold;
    color: #007aff;
  }
}
.comment-item {
  padding: 15px;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
  &:last-child {
    border-bottom: none; /* 最后一项无边框 */
  }
  &:hover { background-color: #f9f9f9; }
}
.comment-content {
  font-size: 16px; font-style: italic; color: #333; margin-bottom: 10px;
}
.comment-meta {
  font-size: 13px; color: #888;
  .target-title { color: #007aff; }
}
.timestamp {
  font-size: 12px; color: #aaa; margin-top: 8px;
}
.loading-state, .empty-state {
  text-align: center; padding: 40px; color: #888;
}
</style>